import $ from './library/jquery.js';
import cookie from './library/cookie.js';

// 获取登录的用户名
if (sessionStorage.getItem('username')) {
    $('.header .topnav p.fl em span').html(sessionStorage.getItem('username'));
}

let shop = cookie.get('shop');
console.log(shop);

if (shop) {

    shop = JSON.parse(shop);

    let idList = shop.map(el => el.id).join();

    // console.log(idList);

    $.ajax({
        type: 'get',
        url: '../../interface/getshop.php',
        data: {
            idList
        },
        dataType: 'json'
    }).then(res => {
        // console.log(res);
        let template = '';
        let sum = 0;
        //单选按钮
        let price = 0;
        res.forEach((el, i) => {
            let picture = JSON.parse(el.picture);
            let current = shop.filter(elm => elm.id === el.id);

            sum += parseFloat(el.price) * current[0].num;
            template += ` 
        <li>
            <input type="checkbox" data-id="${el.id}">
            <div class="shop-img">
                <img src="../${picture[0].src}" alt="">
            </div>
            <div class="shop-title">
                ${el.title}
            </div>
            <div class="shop-price">
                ￥ ${parseFloat(el.price).toFixed(2)}
            </div>
            <div class="num">
                <input type="number" min="1" max="${el.num}" value="${current[0].num}" data-id="${el.id}">
            </div>
            <div class="count">￥${(el.price * current[0].num).toFixed(2)}
            </div>
            <div class="del">
                    <a href="javascript:;" class="removeItem" data-id="${el.id}">删除</a>
            </div>
        </li>`;
        });

        // $('.main .sum .countNm span').html(sum.toFixed(2));
        $('.main .shopList>ul').html(template).find('.removeItem').on('click', function () {
            let res = shop.filter(el => el.id !== $(this).attr('data-id'));
            cookie.set('shop', JSON.stringify(res), 1);
            location.reload();
        });
        $('html').find(':input[type=number]').on('change', function () {
            let id = $(this).attr('data-id');
            let index = shop.findIndex(elm => elm.id == id);
            shop[index].num = $(this).val();
            cookie.set('shop', JSON.stringify(shop), 1);
            location.reload();
        });
        //全选按钮
        $('html').find(':checkbox.allcheck').on('click', function () {
            $(':checkbox:not(.allcheck)').prop('checked', $(this).prop('checked'));
            $(':checkbox.allcheck').prop('checked', $(this).prop('checked'));

            //计算总价
            if ($(':checkbox.allcheck').prop('checked')) {
                $('.main .sum .countNm span').html(sum.toFixed(2));
            } else {
                $('.main .sum .countNm span').html('0.00');
                price = 0;
            }

        });
        //单选按钮
        $('html').find(':checkbox:not(.allcheck)').on('click', function () {
            $(':checkbox.allcheck').prop('checked', isAllCheck());
            price = 0;
            //判断是否选中
            //需要遍历所有的单选按钮
            let shopBut = Array.from($(':checkbox:not(.allcheck)'));
            shopBut.forEach(el => {
                if ($(el).prop('checked')) {
                    // console.log(el);
                    //计算选中价格
                    let id = $(el).attr('data-id');
                    let result = res.filter(el => el.id === id);
                    let current = shop.filter(elm => elm.id === id);
                    price += result[0].price * current[0].num;
                }
            });

            $('.main .sum .countNm span').html(price.toFixed(2));
        });
        // 当复选框中有一个状态为选中时 结算按钮解除禁用 并改变背景颜色
        $('html').find(':checkbox').on('click', function () {
            let arr = Array.from($(':checkbox'));
            let result = arr.some(el => $(el).prop('checked'));
            console.log(result);
            if (result) {
                $('.main .sum .pay button').css('background-color', '#f40');
                $('.main .sum .pay button').removeAttr('disabled');
            } else {
                $('.main .sum .pay button').css('background-color', '#B0B0B0');
                $('.main .sum .pay button').attr('disabled', 'disabled');
            }
        });

        //点击结算按钮 进行结算
        $('html').find('.main .sum .pay button').on('click', function () {
            // alert('一共消费'+$('.main .sum .countNm span').html()); 
            let n = parseFloat($('.main .sum .countNm span').html());
            let userPay = prompt('一共消费了:' + n.toFixed(2));

            if (userPay == n) {
                alert('支付成功');
            } else {
                alert('支付失败');
            }
        });



    }).catch(xhr => {
        console.log(xhr);
    })
}
function isAllCheck() {
    let elms = Array.from($(':checkbox:not(.allcheck)'));
    let result = elms.every(el => $(el).prop('checked'));
    return result;
}